<template>
	<!-- 当墨单被选择的时候就出现 -->
	<view class="doinglist" v-if="member.chooseModan==true">
		<!-- 导航地图 -->
		<view class="map">
			<Momap></Momap>
		</view>
		<!-- 用户接单状态显示 -->
		<view class="userstatus">
			<view class="userinfo">
				<view class="ubox">
					<view class="userinfobox">
						<image class="avatar" src="/common/usrimg/12.jpg" mode="aspectFill"></image>
						<view class="usrame">都是人情撒~</view>
					</view>
					<!-- 这里填写状态 -->
					<view class="status">运送中</view>
				</view>
				
			</view>
			<!-- 接单图片 -->
			<view class="img">
				<image class="listimg" src="/common/goods/4.jpg" mode="aspectFill"></image>
			</view>
		</view>
		
		<!-- 聊天备注 -->
		<view class="chat">
			<view class="beizhu">备注：</view>
			<view class="text">
				希望快递小哥可以顺便帮我买点小零食哦~
			</view>
			
		</view>
		<!-- 悬浮按钮-短信提醒，电话提醒 -->
		<view class="call">
			<uni-fab
						:pattern="pattern"
						:content="content"
						:horizontal="right"
						:vertical="bottom"
						:direction="horizontal"
						@trigger="trigger"
						@fabClick="fabclick"
					></uni-fab>
		</view>
	</view>
	<!-- 否则就不显示，显示为空 -->
	<view class="none" v-else>
		<view class="nonebox">
				您的订单空空如也~
		</view>
	
	</view>
	
</template>

<script setup>
import {ref} from 'vue'
import {useUserMemberStore}from "/stores/usermember.js"
// 定义是否选择了墨单
const member=useUserMemberStore();

// 定义悬浮按钮位置
const right="right"
const bottom="bottom"
const horizontal="horizontal";
// 定义悬浮按钮样式
const pattern={
	color:"#fff",
	selectedColor:"pink",
	backgroundColor:"black",
	buttonColor:"rbga(255,255,255,0.7)",
	icon:"paperplane-filled"
}

const content=[
	{
			iconPath: "/static/images/email.png",
			// iconPath:'/static/tagbar/call.png',
			// selectedIconPath: '/common/images/email.png',
			text: '短信提醒',
			active: false
	},
	{
			iconPath: '/static/images/phonecall.png',
			// selectedIconPath: '@/common/images/phonecall.png',
			text: '电话联系',
			active: false
	},
	{
			iconPath: '/static/images/dingdan.png',
			// selectedIconPath: '@/common/images/phonecall.png',
			text: '配送完成',
			active: false
	}
	
]

// 实现悬浮按钮的逻辑
	// 当点击悬浮按钮里面的图标触发事件

const trigger=(e)=>{
	console.log(e)
	content[e.index].active = !e.item.active
	uni.showModal({
		title: '提示',
		content: `您${content[e.index].active ? '是否要进行' : '取消了'}${e.item.text}`,
		success: function(res) {
			// 如果用户点击确定
			if (res.confirm) {
				if(content[e.index].text=='配送完成'){
					member.chooseModan=false;
					uni.showToast({
						title:"已完成配送",
						icon:"success"
					})
				}
				if(content[e.index].text=='短信提醒'){
					uni.showToast({
						title:"已发送短信联系",
						icon:"none"
					})
				}
				if(content[e.index].text=='电话联系'){
					uni.showToast({
						title:"正在拨打电话",
						icon:"none"
					})
					// 拨打电话
					uni.makePhoneCall({
						phoneNumber: '15361318073' ,
						success:(res)=>{
							 uni.showToast({
							 	title:"已经给客户发送智能语音电话！",
							 	icon:"none"
							 })
						},
						fail:(res)=>{
							 uni.showToast({
							 	title:"拨打失败！",
							 	icon:"none"
							 })
						}
					});
				}
				
				
			} else if (res.cancel) {
				console.log('用户点击取消')
			}
		}
	})
}
   // 当点击悬浮按钮才会触发事件
const fabclick=()=>{
	// uni.showToast({
	// 	title: '点击了悬浮按钮',
	// 	icon: 'none'
	// })
}





</script>

<style lang="scss" scoped >
@keyframes gradientFlow {
 0% { background-position: 0% 0%; }
   25% { background-position: 50% 0%; }
   50% { background-position: 25% 0%; }
   75% { background-position: 75% 0%; }
   100% { background-position: 100% 0%; }
}
@font-face {
  font-family: "阿里妈妈刀隶体 Regular";
  font-weight: 400;
  src: url("//at.alicdn.com/wf/webfont/733Eb6B5swG2/lHPYtpKG6t20.woff2") format("woff2"),
	   url("//at.alicdn.com/wf/webfont/733Eb6B5swG2/roQ4I7g8u96V.woff") format("woff");
  
  font-display: swap;
}
@font-face {
  font-family: "阿里妈妈刀隶体 Regular1";
  font-weight: 400;
 src: url("//at.alicdn.com/wf/webfont/733Eb6B5swG2/ibwxPjtEHJTA.woff2") format("woff2"),
	url("//at.alicdn.com/wf/webfont/733Eb6B5swG2/8txPPRXgVDt8.woff") format("woff");
  
  font-display: swap;
}
.doinglist{
	padding:30rpx 45rpx;
	.map{
		width: 642rpx;
		height: 416rpx;
		border-radius: 54rpx;
		// border:1rpx solid #000;
	}
	.userstatus{
		.userinfo{
			padding:34rpx 30rpx;
			margin-top:26rpx;
			margin-bottom: 26rpx;
			background: #FFE7E7;
			box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
			.ubox{
				display: flex;
				.userinfobox{
					display: flex;
					.avatar{
						width:70rpx;
						height: 70rpx;
						border-radius: 50%;
					}
					.usrame{
						width:245rpx;
						margin-left:30rpx;
						margin-right:30rpx;
						color: #000;
						font-family: "Noto Sans SC";
						font-size: 24rpx;
						font-style: normal;
						font-weight: 400;
						line-height: normal;
					}
				}
				
				.status{
					width: 270rpx;
					height: 36rpx;
					padding: 0rpx 0rpx 8rpx 0rpx;
					border-radius: 9.5px;
					background: #C7ED96;
					box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
					font-family: "Noto Sans SC";
					text-align: center;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
				}
			}
			
		}
		// 接单图片
		.img{
			.listimg{
				width: 100%;
				height: 354rpx;
				box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
			}
		}
	}
	// 聊天备注
	.chat{
		margin-top: 15rpx;
		.beizhu{
			margin-bottom: 20rpx;
		}
	}
}
.none{
	width:600px;
	height:697rpx;
	 background-size: 250% 100%; /* 增大背景尺寸以允许平滑过渡 */
	 animation: gradientFlow 15s linear alternate-reverse infinite; /* 添加动画效果 */
	// margin-top:60rpx;
	// padding:10rpx ;
	// border:1rpx solid #000;
	.nonebox{
		margin-top: 500rpx;
		margin-left: 240rpx;
		color: rgba(0, 0, 0, 0.50);
		font-family: "Abhaya Libre";
		font-size: 32rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx; /* 125% */
	}
}

</style>